<template>
  <div class="app-container">
    <div>
      <table>
        <tr>
          <td>合同名称:</td>
          <td>
            <el-input v-model="listQuery.contract_name" placeholder="请输入合同名称" style="width:200px;"/>
          </td>
          <td>
            <el-button type="primary" size="small" @click="getList">搜索</el-button>
          </td>
        </tr>
      </table>
    </div>
    <el-table v-loading="listLoading" :data="contractList" border fit highlight-current-row
              :header-cell-style="{background:'#F5F5F5',color:'#000'}" style="width: 100%">
      <el-table-column align="center" width="150" label="合同编号">
        <template slot-scope="scope">
          <span>{{ scope.row.contract_code }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="250" label="合同名称">
        <template slot-scope="scope">
          <span>{{ scope.row.contract_name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="80" label="合同状态">
        <template slot-scope="scope">
          <span>{{ scope.row.contract_status | formatContractStatus }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="120" label="签订日期">
        <template slot-scope="scope">
          <span>{{ scope.row.contract_sign_date | formatDateFormatYMD }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="200" label="客户名称">
        <template slot-scope="scope">
          <span>{{ scope.row.customer_name }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="loginType===1" align="center" width="100" label="合同总金额">
        <template slot-scope="scope">
          <span>0</span>
        </template>
      </el-table-column>
      <el-table-column v-if="loginType===1" align="center" width="80" label="回款累计">
        <template slot-scope="scope">
          <span>0</span>
        </template>
      </el-table-column>
      <el-table-column v-if="loginType===1" align="center" width="100" label="应收代理费">
        <template slot-scope="scope">
          <span>0</span>
        </template>
      </el-table-column>
      <el-table-column v-if="loginType===1" align="center" width="100" label="未到账垫付款">
        <template slot-scope="scope">
          <span>0</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <div class="actionClass">
            <router-link :to="'/contract/edit/'+scope.row.id">
              <span>编辑</span>
            </router-link>
            <span
              v-if="scope.row.contract_status===2 && (loginType ===1 && (userName === '王君' || userName === '超级管理员'))"
              @click="openContractDialog(scope,1)">审核合同</span>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :limit.sync="listQuery.pageSize"
      :page.sync="listQuery.pageIndex"
      :total="total"
      @pagination="getList"
    />
    <el-dialog
      title="审核合同状态"
      :visible.sync="dialogChangeContractStatusFormVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      :append-to-body="true"
      @close="dialogChangeContractStatusFormVisible=false"
    >
      <el-form :model="changeContractStatusForm">
        <el-form-item label="审核状态：">
          <el-radio-group v-model="changeContractStatusForm.contract_status">
            <el-radio label="0">审批失败</el-radio>
            <el-radio label="1">审批通过</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="changeContractStatus">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import store from '@/store'
import {
  contractList,
  updateContractStatus
} from '@/api/contract'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { formatDate } from '@/utils/date'

export default {
  name: 'ContractList',
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    },
    formatDateFormatYMD(time) {
      const date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd')
    },
    formatSQLDateFormatYMD(time) {
      const date = new Date(time * 1000)
      return formatDate(date, 'yyyy-MM-dd')
    },
    formatContractStatus(status_id) {
      const option_contract_status = [
        { value: 0, label: '审批失败' },
        { value: 1, label: '审批通过' },
        { value: 2, label: '审批中' }]
      return (option_contract_status.find((item) => item.value === status_id) || { label: '' }).label
    }
  },
  data() {
    return {
      loginType: 0,
      userName: '',
      contractList: [],
      total: 0,
      listLoading: true,
      listQuery: {
        contract_name: '',
        pageIndex: 0,
        pageSize: 10
      },
      contract_id: 0,
      dialogChangeContractStatusFormVisible: false,
      changeContractStatusForm: {
        contract_id: 0,
        contract_status: '0'
      }
    }
  },
  created() {
    this.getList()
    this.loginType = store.getters.loginType
    this.userName = store.getters.userName
  },
  methods: {
    openContractDialog(obj, objType) {
      this.changeContractStatusForm.contract_id = obj.row.id
      if (objType === 1) {
        this.dialogChangeContractStatusFormVisible = true
      }
    },
    changeContractStatus() {
      const dataParam = {
        id: parseInt(this.changeContractStatusForm.contract_id),
        contract_status: parseInt(this.changeContractStatusForm.contract_status)
      }
      updateContractStatus(dataParam).then(res => {
        this.loading = false
        console.log(res)
        this.$notify({
          title: '成功',
          message: res.message || '更新成功',
          type: 'success',
          duration: 2000
        })
        this.getList()
      })
      this.dialogChangeContractStatusFormVisible = false
    },
    getList() {
      const that = this
      that.listLoading = true
      contractList(this.listQuery).then(response => {
        that.contractList = response.data
        that.total = response.page_count
        that.listLoading = false
      }).catch(() => {
        that.contractList = []
        that.listLoading = false
      })
    }
  }
}
</script>

<style>
.edit-input {
  padding-right: 100px;
}

.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}

.el-table {
  font-size: 13px;
}

.el-table th, .el-table td {
  padding: 5px 0;
}

.el-input__inner {
  height: 30px;
}

.el-input__icon {
  line-height: 30px !important;
}
</style>
